<template>
  <el-card class="box-card">
    <div slot="header"  class="clearfix">
      <!-- <span>卡片名称</span> -->
      <my-bread></my-bread>
      <div class="fr flex_align ">
        <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        <el-button :loading="loading" style="margin:0 10px;" type="primary" @click="handleClick">导出电子文件</el-button>
      </div>
    </div>

    <show-table :tableData='tableData'></show-table>
    <!-- <TempalteTest /> -->
    <!-- <BaiduMap /> -->
    <div class="app-container">
      <upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload" />
      <el-table :data="tableData1" border highlight-current-row style="width: 100%;margin-top:20px;">
        <el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item" />
      </el-table>
    </div>

    <el-button @click="speckText('主人,主人~~~,您有新消息囖,请注意查收!')">哈哈</el-button>
  </el-card>
</template>

<script>
import ShowTable from './Components/ShowTable'
import UploadExcelComponent from '@/components/UploadExcel/index.vue'

// import axios from 'axios'
import { testApiApi } from '../../api/testApi.js'

// import { testApiApi } from '../../api/testApi'
export default {
  name: 'Home',
  components: { ShowTable, UploadExcelComponent },
  data () {
    return {
      loading: false,
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '1'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '2'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '3'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '4'
      }],
      options: [{
        value: 'xlsx',
        label: 'xlsx'
      }, {
        value: 'csv',
        label: 'csv'
      }, {
        value: 'txt',
        label: 'txt'
      }],
      value: 'xlsx',
      tableData1: [],
      tableHeader: [],
      access_token: ''
    }
  },

  created () {
    testApiApi().then(res => console.log(res))
    // axios.get('/article/list').then(res => { console.log(res.data) })
  },

  methods: {
    // 语言播报

    speckText (str) {
      var url = `http://tsn.baidu.com/text2audio?lan=zh&cuid=101001001&ctp=1&tok=${this.access_token}&per=103&vol=10&tex=` + encodeURI(str)
      new Audio(url).play()
      // if (this.tip) {
      //   n.play() // $("...").play(); // var sound = new Sound(request); // sound.play();
      // } else {
      //   n.pause()
      // }
    },

    getTok () {
      // getTok().then(res => {
      //   this.access_token = res.data['access_token']
      // })
    },

    // ---
    handleClick () {
      this.loading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['名字', '地址', '日期']
        // const data = this.tableData
        const filterVal = ['name', 'address', 'date']
        const data = this.formatJson(filterVal, this.tableData)
        excel.export_json_to_excel({
          header: tHeader, // Header Required
          data, // Specific data Required
          filename: 'excel-list', // Optional
          autoWidth: true, // Optional
          bookType: this.value// Optional
        })
        this.loading = false
      })
    },
    formatJson (filterVal, jsonData) {
      // console.log(jsonData.map(v => filterVal.map(j => v[j])))
      return jsonData.map(v => filterVal.map(j => v[j]))
    },

    beforeUpload (file) {
      const isLt1M = file.size / 1024 / 1024 < 1

      if (isLt1M) {
        return true
      }

      this.$message({
        message: 'Please do not upload files larger than 1m in size.',
        type: 'warning'
      })
      return false
    },
    handleSuccess ({ results, header }) {
      this.tableData1 = results
      this.tableHeader = header
    }
  }
}
</script>
